<template>
    <div class="linChart" ref="chartContainer"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';

const props = defineProps({
    data: {
        type: Object,
        required: true
    },
});

const chartContainer = ref(null);
let myChart = null as any;

const updateChart = () => {
    if (!chartContainer.value) return;

    // Initialize the chart
    myChart = echarts.init(chartContainer.value);

    // Define chart options
    const option = {
        grid: {
            top: '20%',//生成的echarts图片和顶部的距离
            bottom: '2%',//echarts图片和底部的距离
            left: '1%',//echarts图片和左边的距离
            right: '2%',//echarts图片和右边的间距,
            containLabel: true,//当containLabel:为ture时，以上设置生效
        },
        xAxis: {
            type: 'category',
            data: props.data.type01.map((item: any) => item.date),
            axisTick: { show: false },
            name: '',
            nameTextStyle: {
                color: '#FFFFFF',
                fontWeight: "normal",
                fontSize: 8,
                verticalAlign: "top",
                lineHeight: 27
            },
            boundaryGap: true,
            axisLine: {
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.3)"
                }
            },
            axisLabel: {
                show: true,
                fontSize: 10,
                color: "rgba(255, 255, 255, 1)"
            },

        },
        yAxis: [{
            type: 'value',
            // boundaryGap: true,
            axisTick: { show: false },
            name: '次',
            nameTextStyle: {
                color: '#FFFFFF',
                fontSize: 10,
                align: "right",
            },
            splitLine: {
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.1)"
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.3)"
                }
            },
            axisLabel: {
                show: true,
                fontSize: 10,
                color: "rgba(255, 255, 255, 1)"
            }
        }],
        tooltip: {
            trigger: 'axis'
        },
        series: [
            {
                data: props.data.type01.map((item: any) => item.value),
                name: '一般',
                type: 'line',
                smooth: false,
                showAllSymbol: true,
                symbol: 'emptyCircle',
                symbolSize: 5,
                itemStyle: {
                    color: '#00E3FE'
                },

            },
            {
                data: props.data.type02.map((item: any) => item.value),
                name: '紧急',
                type: 'line',
                smooth: false,
                showAllSymbol: true,
                symbol: 'emptyCircle',
                symbolSize: 5,
                itemStyle: {
                    color: '#FF6B22'
                }

            },
            {
                data: props.data.type03.map((item: any) => item.value),
                name: '危急',
                type: 'line',
                smooth: false,
                showAllSymbol: true,
                symbol: 'emptyCircle',
                symbolSize: 5,
                itemStyle: {
                    color: '#FF5757'
                }

            }
        ]

    };
    console.log(option);


    // Set options
    myChart.setOption(option);

    // Handle resize
    window.addEventListener('resize', () => {
        myChart.resize();
    });
};

// Watch for data changes and update the chart
watch(() => props.data, () => {
    if (myChart) {
        updateChart();
    }
}, { immediate: true });

onMounted(() => {
    updateChart();
});
</script>

<style lang="scss" scoped>
.linChart {
    width: 100%;
    height: vh(200);
}
</style>